<!--
 * @Author: lijilong
 * @Date: 2024-06-07 09:31:29
 * @LastEditors: lijilong lijilong@thwater.com
 * @LastEditTime: 2024-09-09 15:32:31
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
	<movable-area :scale-area="true" :style="{ 'width': '98vw', 'height': '1100rpx', 'overflow': 'hidden' }">
		<movable-view direction="all" :inertia="true" out-of-bounds :scale-min="0.01" :scale-max="4" :scale="true"
			:scale-value="0.6" :style="{ 'width': 'auto ', 'height': 'auto' }">
			<view class="step-panel">
				<view class="pancel" ref="pancelRef" id="pancel-container">
					<view class="step-list">
						<view class="item" v-for="(element, index) in stepList" :key="index" :class="[
							props.materialList.length === index + 1 && 'last',
							(element.processName === '终检') && 'center-ctrl',
						]">

							<view class="l-table" v-if="element.processName == '中控'">
								<view class="table-container bordered">
									<table class="analysis-table">
										<tbody>
											<tr>
												<th>分析手段</th>
												<th>检验指标</th>
											</tr>
											<tr align="center" v-for="(item, index) in element.checkList" :key="index">
												<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.analysisName }}
												</td>
												<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.itemName }}</td>
											</tr>
										</tbody>
									</table>
								</view>
							</view>
							<view class="l-table" v-else>
								<view class="table-container" :class="element.putIntoFlag && element.dosageList && element.dosageList.length
									? 'bordered'
									: ''
									">
									<view class="content-container">
										<table class="analysis-table" v-if="element.putIntoFlag">
											<tbody>
												<tr>
													<th>名称</th>
													<th>规格</th>
													<th>用量</th>
													<th>单位</th>
												</tr>
												<tr align="center" v-for="(item, index) in element.dosageList" :key="index">
													<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.invName }}
													</td>
													<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.invStd }}
													</td>
													<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.dosage }}
													</td>
													<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.unit }}</td>
												</tr>
											</tbody>
										</table>
									</view>
								</view>
							</view>

							<view class="content-container">
								<view v-if="isScheme">
									<wd-button plain hairline class="add-btn" size="small" shape="circle"
										:style="{ fontSize: '12px' }" v-if="element.isVerify" @click="element.isVerify = 0">
										检
									</wd-button>
								</view>
								<view v-else>
									<view v-for="(item, i) in element.inspectionList" :key="i">
										<wd-button v-if="item.id" plain hairline
											:class="['add-btn', item.id ? 'add-btn__color' : '']" size="small"
											shape="circle"
											:style="{ marginRight: i != 0 ? i * 20 + 'px' : '0', fontSize: '12px' }"
											@click="toInspectionList(item, element)">
											检{{ i + 1 }}
										</wd-button>
									</view>
								</view>
								<view v-if="element.resourceId" :class="['resource-btn']">
									<wd-popover  v-model="element.show" placement="right" :content="element.resourceName">
										<wd-button plain hairline :round="false" size="small">
											资源
										</wd-button>
									</wd-popover>
								</view>

								<!-- <view :class="['content', element.bgId ? 'content__color' : '']"
									v-if="isRecord && element.processName === '终检' && element.id"
									@click="zjtoInspectionList(element, 1)">{{ element.processName }}
								</view> -->
								<view class="content" @click.stop="openDrawer(element)">{{ element.processName }}
								</view>
								<view v-if="element.putIntoFlag || element.processName == '中控'" class="left-line">
								</view>
								<view v-if="element.paramList && element.paramList.length || element.processName == '中控'"
									class="right-line">
								</view>
								<view class="bottom-line">
									<view class="line"></view>
									<view class="arrow"></view>
								</view>
							</view>
							<view class="r-table bordered" v-if="element.processName == '中控'">
								<view class="table-container">
									<table class="analysis-table">
										<tbody>
											<tr>
												<th>取样实际描述</th>
												<th>取样时机</th>
											</tr>
											<tr align="center" v-for="(item, index) in element.sampletimeList" :key="index">
												<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.sampleDesc }}
												</td>
												<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.sampleTime }}
												</td>
											</tr>
										</tbody>
									</table>
								</view>
							</view>
							<view class="r-table" :class="element.paramList && element.paramList.length ? 'bordered' : ''"
								v-else  @click="editModal1">
								<view class="mb4" v-if="isRecord && element.paramList && element.paramList.length">
									开始时间：{{ element.startTime }}
								</view>
								<view class="table-container">
									<table class="analysis-table" v-if="element.paramList && element.paramList.length">
										<tbody>
											<tr>
												<th>参数</th>
												<th v-if="isRecord">目标值</th>
												<th>实测值</th>
												<th>单位</th>
												<th
													v-if="element.putIntoFlag && element.dosageList && element.dosageList.length">
													用料名称</th>
												<th v-if="isRecord">操作时间</th>
											</tr>
											<tr align="center" v-for="(item, index) in element.paramList?.filter(item => item.status != 4).slice(0, 5)" :key="index">
												<td :class="item.status == 4 ? 'td__abandon' : ''" d>{{ item.paramName }}
												</td>
												<td :class="item.status == 4 ? 'td__abandon' : ''" v-if="isRecord">{{
													item.schemeParamValue }}</td>
												<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.paramValue }}
												</td>
												<td :class="item.status == 4 ? 'td__abandon' : ''">{{ item.paramUnit }}</td>
												<td :class="item.status == 4 ? 'td__abandon' : ''"
													v-if="element.putIntoFlag && element.dosageList && element.dosageList.length">
													{{ item.invName }}
												</td>
												<td :class="item.status == 4 ? 'td__abandon' : ''" v-if="isRecord">{{
													formatTime(item.operateTime) }}</td>
											</tr>
										</tbody>
									</table>
								</view>
								<view class="mt4" v-if="isRecord && element.paramList && element.paramList.length">
									结束时间：{{ element.endTime }}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</movable-view>
	</movable-area>


	<wd-popup v-model="openDrawerVis" position="right" custom-style="width: 60%;" :z-index="100">
		<view class="cu-dialog" @click.stop="">
			<view class="cu-bar bg-white">
				<view class="action" @click="openDrawerVis = false">取消</view>
				<!-- <view class="action text-blue mks" @tap="openDrawerVis = false">确定</view> -->
			</view>
			<view class="filter_container">
				<view class="block">
					<view class="label">现象描述</view>
					<view class="row">
						<wd-textarea type="textarea" auto-height v-model="elementForm.description" placeholder="现象描述"
							clearable style="width: 100%" no-border disabled>
						</wd-textarea>
					</view>
				</view>
				<view class="block">
					<view class="label">附件</view>
					<view class="row">
						<view class="list-picture">
							<view class="list-item" v-for="(item, index) in fileList">
								<view class="list-item-thumbnail">
									<image :width="48" :height="48" :src="item.url" v-if="isImage(item.url)"
										mode="scaleToFill" @click="preview(item.url)" />
									<view v-else class="txt" @click="previewWeb(item.url)">
										{{ item.url.replace(/.*\./, '') }}
									</view>
								</view>
								<text class="list-item-name">附件{{ index + 1 }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</wd-popup>
	<!-- <a-drawer width="40%" placement="right" :open="openDrawerVis" @close="onClose" :body-style="{ paddingBottom: '80px' }"
    :footer-style="{ textAlign: 'right' }">
    <a-form :model="elementForm" layout="vertical">
      <a-row :gutter="16">
        <a-col :span="24">
          <a-form-item label="需求描述" name="description">
            <a-textarea v-model:value="elementForm.description" style="min-height: 76px" readonly></a-textarea>
          </a-form-item>
        </a-col>
        <a-col :span="24">
          <a-form-item label="附件">
            <div class="list-picture">
              <div class="list-item" v-for="(item, index) in fileList">
                <span class="list-item-thumbnail">
                  <a-image :width="48" :height="48" :src="item.url" placeholder v-if="isImage(item.url)" />
                  <span v-else class="txt" @click="handlePreview(item)">{{ item.url.replace(/.*\./, '') }}</span>
                </span>
                <span class="list-item-name">附件{{ index + 1 }}</span>
              </div>
            </div>

            <a-modal :open="previewVisible" :footer="null" @cancel="handleCancel" top="1vh" style="min-width: 80vw">
              <img style="width: 100%" :src="previewImage" v-if="isImage(previewImage)" />
              <iframe :src="returnViewUrl(previewImage)" style="width: 100%; height: 80vh"></iframe>
            </a-modal>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
  </a-drawer> -->
</template>

<script setup lang="ts" name="ExperimnetStepPreview">
import dayjs from 'dayjs';
import { cloneDeep } from 'lodash';
const props = withDefaults(
	defineProps<{
		materialList: any[];
		mode?: 'scheme' | 'record';
		canInspection?: boolean;
		showInspection?: boolean;
	}>(),
	{
		materialList: () => [],
		mode: 'scheme',
		canInspection: true,
		showInspection: true,
	},
);

const emit = defineEmits(['switchChange']);

const stepList = computed(() => {
	const list = cloneDeep(props.materialList);
	if (!list) return [];
	return list.map((item) => {
		if (item.paramList?.length) {
			// let i = 0;
			// let groupFirst = item.paramList[i];
			// groupFirst.row = i;
			// console.log(groupFirst.row)
			item.paramList.forEach((row, _rowIndex) => {
				const prevRow = item.paramList[_rowIndex - 1];
				let nextRow = item.paramList[_rowIndex + 1];

				if (prevRow && prevRow.paramName === row.paramName) {
					row.row = 0;
					row.rowspan = 0;
				} else {
					let countRowspan = 1;
					while (nextRow && nextRow.paramName === row.paramName) {
						nextRow = item.paramList[++countRowspan + _rowIndex];
					}
					if (countRowspan > 1) {
						row.row = _rowIndex;
						row.rowspan = countRowspan;
					}
				}
				// if (param.paramName === groupFirst.paramName) {
				//   if (!groupFirst.rowspan && groupFirst.rowspan !== 0) {
				//     groupFirst.rowspan = 1;
				//   } else {
				//     groupFirst.rowspan++;
				//   }
				// } else {
				//   debugger
				//   i = groupFirst.rowspan;
				//   groupFirst = param;
				//   groupFirst.rowspan = 1;
				//   groupFirst.row = i;
				// }
			});
		}
		return item;
	});
});

const mergeCells = function (data) {
	// console.log(
	//   data
	//     .map((item) => {
	//       return { row: item.row, col: 0, rowspan: item.rowspan || 1, colspan: item.colspan || 1 };
	//     })
	//     .filter((item) => item.rowspan > 1 || item.colspan > 1)
	// );
	return data
		.map((item) => {
			return { row: item.row, col: 0, rowspan: item.rowspan || 1, colspan: item.colspan || 1 };
		})
		.filter((item) => item.rowspan > 1 || item.colspan > 1);
};

const editModal1 = () => {
	console.log(111)
  emit('switchChange')
}

const dosageListColumn = ref([
	{
		label: '用料名称',
		fieldName: 'invName',
	},
	{
		label: '规格',
		fieldName: 'invStd',
	},
	{
		label: '用量',
		fieldName: 'dosage',
	},
	{
		label: '单位',
		fieldName: 'unit',
	},
]);

const fileList = ref([]);

const openDrawerVis = ref(false);
const elementForm = ref({
	description: '',
	attachment: '',
});

const openDrawer = (ele) => {
	if (props.mode === 'scheme' || ['中控', '终检'].includes(ele.processName)) return;
	openDrawerVis.value = true;
	elementForm.value = ele;
	if (elementForm.value.attachment) {
		fileList.value = elementForm.value.attachment.split(',').map((item) => {
			return {
				url: item,
			};
		});
	}
};

const onClose = () => {
	openDrawerVis.value = false;
	elementForm.value = { description: '', attachment: '' };
	fileList.value = [];
};

const previewVisible = ref(false);
const previewImage = ref('');

const handleCancel = () => {
	previewVisible.value = false;
};

const preview = (url) => {
	if (!url) return;
	uni.previewImage({
		urls: [url],
	});
};

const previewWeb = (url) => {
	uni.navigateTo({
		url: '/pages/pm/preview-online?url=' + url + '&isWeb=1',
	});
};

const isImage = (url: string) => {
	if (!url) return '';
	const suffix = url.replace(/.*\./, '');
	return ['jpg', 'jpeg', 'png', 'gif', 'svg', 'JPG', 'JPEG', 'PNG', 'GIF', 'SVG', 'WebP'].includes(
		suffix,
	);
};


const isScheme = computed(() => {
	return props.mode === 'scheme';
});

const isRecord = computed(() => {
	return props.mode === 'record';
});

const pancelRef = ref();

const popupContainer = function () {
	return pancelRef.value;
};

const formatTime = function (time) {
	if (!time) return '';
	return dayjs(time).format('MM-DD HH:mm:ss');
};

const zjtoInspectionList = function (element, type) {
	uni.navigateTo({ url: `/pages/pm/assay-report/form?id=${element.bgId}&type=${type}&t=qcMiddleReport` });
};

const toInspectionList = function (item, element) {
	if (props.mode === 'scheme') return;
	const type = element.processName === '终检' ? 1 : 0;
	uni.navigateTo({ url: `/pages/pm/assay-report/form?id=${item.id}&type=${type}&t=qcMiddleReport` });
};
</script>

<style scoped lang="scss">
@import './table';

$background: #edeff6;
$nodeWidth: 80px;
$nodeHeight: 45px;
$tableMargin: 50px;
$borderColor: #5f95ff;
$spacing: 20px;

.step-panel {
	height: calc(100%);
}

.pancel {
	// display: flex;
	// flex: 1;
	// width: 100%;
	// min-height: 600px;

	// justify-content:center;
	// flex-direction: column;
	// align-items: center;
	// background-color: $background;
	// height: 100%;
	// padding-top: 30px;
	// max-height: 70vh;
	padding: 50px;
	overflow: auto;

	.step-list {

		// min-height: 600px;
		// width: 100%;
		// width: $nodeWidth;
		// padding-left: 90px;
		// transform: translateX(120px);
		// cursor: grabbing;
		.item {
			position: relative;
			display: flex;
			min-height: 120px;

			// justify-content: center;
			padding-bottom: $spacing;

			&.sortable-ghost {
				opacity: 0;
			}

			&.center-ctrl {
				// margin-top: -30px;
				min-height: 90px;

				.content {
					// width: $nodeHeight;
					// border-radius: 50%;
					border-radius: calc($nodeHeight/2);

					&__color {
						color: #52c41a;
						border-color: #52c41a
					}

				}
			}

			.content-container {
				position: relative;

				// .remove-btn {
				//   position: absolute;
				//   top: -10px;
				//   right: -10px;
				//   z-index: -1;
				//   opacity: 0;
				//   transition: 0.26s;
				// }
				// &:hover {
				//   .remove-btn {
				//     z-index: 1;
				//     opacity: 1;
				//   }
				// }
				.resource-btn {
					position: absolute;
					top: -20rpx;
					left: -40rpx;
					z-index: 1;
					opacity: 1;
				}
				.add-btn {
					position: absolute;
					top: -10px;
					right: -10px;
					z-index: -1;
					width: 56rpx;
					opacity: 0;
					transition: 0.26s;
				}

				.add-btn {
					top: 32px;
					z-index: 1;
					opacity: 1;

					&__color {
						color: #52c41a;
						border-color: #52c41a
					}
				}

				// &:hover {
				//   .remove-btn {
				//     z-index: 1;
				//     opacity: 1;
				//   }
				// }
			}

			.content {
				display: inline-block;

				// width: 100%;
				// height: 100%;
				width: $nodeWidth;
				padding: 12px;
				color: #333;

				// height: $nodeHeight;
				// line-height: calc($nodeHeight);
				text-align: center;
				background: #eff4ff;
				border: 1px solid $borderColor;
				border-radius: 4px;

				&__color {
					color: #52c41a;
					border-color: #52c41a
				}

				// cursor: move;
			}

			.l-table {
				position: relative;

				// top: -30px;
				// left: calc(-260px - $tableMargin);
				display: inline-block;
				width: 360px;
				margin-right: $tableMargin;

				.table-container {
					&.bordered {
						padding: 8px;
						background-color: var(--color-bg-container);
						border: 1px solid $borderColor;
						border-radius: 4px;
					}
				}
			}

			.r-table {
				position: relative;

				// top: -30px;
				display: inline-block;
				width: 550px;
				margin-left: $tableMargin;

				&.bordered {
					padding: 8px;
					border: 1px solid $borderColor;
					border-radius: 4px;
				}
			}

			.left-line {
				position: absolute;
				top: calc($nodeHeight/2 - 5px);
				right: calc($nodeWidth + 24px);
				width: calc($tableMargin + 3px);
				height: 1px;
				background-color: $borderColor;
				transform: rotate(20deg);
			}

			.right-line {
				position: absolute;
				top: calc($nodeHeight/2 - 5px);
				left: calc($nodeWidth + 24px);
				width: calc($tableMargin + 3px);
				height: 1px;
				background-color: $borderColor;
				transform: rotate(-20deg);
			}

			.bottom-line {
				position: absolute;
				// inset: $nodeHeight 0 0 - $spacing 0;
				top: $nodeHeight;
				bottom: 0 - $spacing;
				left: 0;
				right: 0;
				margin: auto;
				width: 5px;
				margin: auto;

				.line {
					width: 1px;
					height: calc(100% - 11px);
					margin: auto;
					background-color: $borderColor;
				}

				.arrow {
					width: 0;
					height: 0;
					margin-left: -2px;
					border-top: 11px solid $borderColor;
					border-right: 5px solid transparent;
					border-bottom: 5px solid transparent;
					border-left: 5px solid transparent;
				}
			}

			// &:last-of-type {
			//   min-height: $nodeHeight;
			//   .bottom-line {
			//     display: none;
			//   }
			// }
			&.last {
				min-height: $nodeHeight;

				.bottom-line {
					display: none;
				}
			}
		}
	}

	.td__abandon {
		position: relative;

		&::after {
			content: "";
			position: absolute;
			top: 50%;
			left: 0;
			width: 100%;
			height: 0;
			border-bottom: 1px solid #f56c6c;
			z-index: 1;
		}
	}
}

.list-picture {
	.list-item {
		position: relative;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		float: left;
		width: 200px;
		height: 66px;
		padding: 8px;
		margin-right: 8px;
		border: 1px solid #d9d9d9;
		border-radius: 8px;

		.list-item-thumbnail {
			flex: none;
			width: 48px;
			height: 48px;
			overflow: hidden;
			text-align: center;
			text-overflow: ellipsis;
			white-space: nowrap;

			span {
				display: inline-block;
				width: 48px;
				height: 100%;
				line-height: 48px;

				&.txt {
					background-image: url('../../../../static/txtM.png');
					background-repeat: no-repeat;
					background-size: 100% 100%;
				}
			}
		}

		.list-item-name {
			flex: auto;
			padding: 0 8px;
			overflow: hidden;
			line-height: 1.5714285714285714;
			text-overflow: ellipsis;
			white-space: nowrap;
			transition: all 0.3s;
		}
	}
}


.cu-dialog {
	font-size: 28rpx;

	.cu-bar {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		min-height: 35px;
		padding: 0 10px;
	}

	.cu-bar .search-form {
		display: flex;
		flex: 1;
		align-items: center;
		height: 64rpx;
		margin: 0 30rpx;
		overflow: hidden;
		/* padding: 0 40rpx; */
		font-size: 24rpx;
		line-height: 64rpx;
		color: #333;
		background-color: white;
	}

	.search-container .filter-icon {
		padding: 0 18rpx;
		margin: 0;
		font-size: 40rpx;
		color: #007aff;
		border-left: 1rpx solid #f3f3f3;
	}

	.cu-dialog>.cu-bar:first-child .action {
		margin-right: 20rpx;
	}

	.filter_container {
		padding: 32rpx;
		padding-bottom: 64rpx;
		text-align: left;
		background-color: #fff;

		.block {
			~.block {
				margin-top: 32rpx;
			}

			.label {
				margin-bottom: 20rpx;
				font-weight: bold;
			}
		}

		.row {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			justify-content: space-between;

			input {
				flex: 1;
				height: 33rpx;
				padding: 16rpx 12rpx;
				font-size: 26rpx !important;
				background-color: #f7f7f7;
				border: 1rpx solid #f7f7f7;
				border-radius: 8rpx;

				.input-placeholder {
					color: #8a929f;
				}
			}

			.btn {
				flex: 1;
				padding: 16rpx;
				color: #999;
				text-align: center;
				background-color: #f7f7f7;
				border: 1rpx solid #dedede;
				border-radius: 8rpx;

				~.btn {
					margin-left: 24rpx;
				}

				&.primary {
					color: #fff;
					background-color: #007aff;
					border-color: #007aff;
				}
			}
		}
	}
}
</style>